import React from 'react';

import { Slider } from '@ray-js/smart-ui';
import { View, Text } from '@ray-js/components';

// 函数组件
function Cw1() {


  const [value, setValue] = React.useState(30);
  return (

    <View>

      <Slider
        isVertical
        value={value}
        step={1}
        min={0}
        max={100}
        parcel
        parcelMargin={0}
        // useParcelPadding={false}



        thumbWidth={20} //刻度
        thumbHeight={5}
        // thumbRadius={1}//圆角
        thumbStyle={{
          background: '#158CFB',//背景
          border: '3px solid #158CFB',
          // boxShadow: 'transparent',
        }}



        maxTrackWidth="48px"
        maxTrackHeight="203px"
        maxTrackRadius="8px"
        minTrackWidth="48px"
        minTrackHeight="114px"
        maxTrackColor="linear-gradient(to top, rgb(255, 202, 92) 0%, rgb(253, 243, 240) 50.46%, rgb(255, 255, 255) 62.61%, rgb(225, 231, 253) 100%);"
        minTrackColor="transparent"//设置滑块激活状态下的背景颜色。
        onAfterChange={setValue}

      />




      <Slider
        isVertical
        value={value}
        step={1}
        min={0}
        max={100}
        parcel
        parcelMargin={0}
        // useParcelPadding={false}



        thumbWidth={20} //刻度
        thumbHeight={5}
        // thumbRadius={1}//圆角
        thumbStyle={{
          background: '#158CFB',//背景
          border: '3px solid #158CFB',
          // boxShadow: 'transparent',
        }}



        maxTrackWidth="48px"
        maxTrackHeight="203px"
        maxTrackRadius="8px"
        minTrackWidth="48px"
        minTrackHeight="114px"
        maxTrackColor="linear-gradient(to bottom, rgb(255, 255, 255) 3.7%, rgb(0, 0, 0) 113%);"
        minTrackColor="transparent"//设置滑块激活状态下的背景颜色。
        onAfterChange={setValue}

      />

    </View>



  );
}

// 或者类组件
// class MyButton extends React.Component {
//   render() {
//     return <button>{this.props.text}</button>;
//   }
// }

export default Cw1; // 默认导出